<template>
	<view class="content">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
		<view class="section-0" >
			<view class="section-body">
				<view class="frequency">{{project_name}}</view>
			</view>
		</view>
		<view class="section-1">
			<view class="list">
				<view @click="go(item)" class="item" v-for="(item,index) in list" :key="index">
					<view class="text">
						<view class="poss">{{item.meeting_name}}</view>
						<view class="iconfont icon-xiangyou1"></view>
					</view>
					<view class="text-1">
						<view class="poss">{{item.meeting_type}}</view>
						<view>会议发起人：{{item.user_name}}</view>
					</view>
					<view class="text-1">{{item.meeting_time.substring(0, 10)}}<text style="margin-left: 20rpx;">{{item.meeting_duration}}分钟</text></view>
				</view>
			</view>
		</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import { meetingListApi } from '@/api/statistics.js';
	export default {
		onLoad(e) {
			this.project_Id = e.id
			this.project_name = e.project_name
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				project_Id:'',
				list:[],
				project_name:''
			};
		},
		
		methods:{
			go(item) {
				uni.navigateTo({
					url: "/pages/statistics/comprehensive/duty/meeting/list/info/index?id=" + item.id
				})
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				const {data} =  await meetingListApi({
					id: this.project_Id,
					page: page.num,
					pageSize: this.pageSize
				});
				// console.log('数据',data)
				
				if (data.code === 1 || data.code === 200) {
					const list = data.data.data;
					 list.sort(function (a, b) {
                     return a.meeting_time < b.meeting_time ? 1 : -1;
                   })
					
					// 接口返回的当前页数据列表 (数组)
					let curPageData = list; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.data.list.last_page; 
					let totalPage = 1; 
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
						// this.mescroll.endSuccess(1);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
			// go(item) {
			// 	uni.navigateTo({
			// 		url: "/pages/statistics/comprehensive/duty/meeting/list/info/index?params=" + JSON.stringify(item)
			// 	})
			// },
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #fff;
	}
	.section-1{
		position: relative;
		top: -50rpx;
		z-index: 10;
		background-color: #fff;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.list{
			width: 670rpx;
			box-sizing: border-box;
			margin-left: 40rpx;
			border-top: 2rpx solid #d8e4f2;
			.item{
				width: 100%;
				border-bottom: solid 2rpx #f2f2f0;
				letter-spacing: 2rpx;
				color: #3b3c40;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				padding-top: 17rpx;
				padding-bottom: 20rpx;
				.text{
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					font-stretch: normal;
					.poss{
						width: 90%;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
				.text-1{
					width: 100%;
					font-size: 14rpx;
					color: #7b9bb2;
					display: flex;
					.poss{
						width: 50%;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		
	}
	.section-0{
		width: 100%;
		background-color: #2e5efe;
		.section-body{
			width: 100%;
			padding-left: 40rpx;
			height: 150rpx;
			padding-right: 40rpx;
			padding-bottom: 50rpx;
			background-color: #1534ce;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			.frequency{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 26rpx;
				color: #87c6ff;
				span{
					color: #fff;
				}
			}
			.item{
				width: 33.33%;
				float: left;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;
				padding-top: 40rpx;
				height: 100rpx;
				position: relative;
				.shape{
					width: 4rpx;
					height: 84rpx;
					background-image: linear-gradient(rgba(#3658f2, 0.3) 0%, #3658f2 30%, #3658f2 70%, rgba(#3658f2, 0.3) 100%,);
					position: absolute;
					right: 0;
					top: 48rpx;
				}
				.top{
					width: 100%;
					text-align: center;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #95c4fa;
				}
				.bottom{
					width: 100%;
					text-align: center;
					font-size: 58rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #ffde00;
				}
			}
		}
	}
</style>
